<template>
  <div class="info">
    <van-swipe class="my-swipe" ref="my-swipe" @change="onChange" style="height: 100vh;" :loop="false" vertical :show-indicators="false">
      <van-swipe-item>
        <Select />
      </van-swipe-item>
      <van-swipe-item>
        <img class="select-time" src="../assets/time.png" alt="">
        <div class="time-show" @click="show=true">
          <div class="t-f" style="margin-left: 0px;">{{tMonth}}</div>
          <div class="t-b">月</div>
          <div class="t-f">{{tDay}}</div>
          <div class="t-b">日</div>
        </div>
        <img class="select-select" src="../assets/select.png" alt="">
        <div class="area">
          <img class="select-bg" :src="imgs[area]" alt="">
          <div class="dongcheng" @click="changeArea('dongcheng')"></div>
          <div class="xicheng" @click="changeArea('xicheng')"></div>
          <div class="haidian" @click="changeArea('haidian')"></div>
          <div class="chaoyang" @click="changeArea('chaoyang')"></div>
          <div class="fengtai" @click="changeArea('fengtai')"></div>
          <div class="shijingshan" @click="changeArea('shijingshan')"></div>
          <div class="daxing" @click="changeArea('daxing')"></div>
          <div class="fangshan" @click="changeArea('fangshan')"></div>
          <div class="mentuogou" @click="changeArea('mentuogou')"></div>
          <div class="changping" @click="changeArea('changping')"></div>
          <div class="yanqing" @click="changeArea('yanqing')"></div>
          <div class="huairong" @click="changeArea('huairong')"></div>
          <div class="miyun" @click="changeArea('miyun')"></div>
          <div class="shunyi" @click="changeArea('shunyi')"></div>
          <div class="pingu" @click="changeArea('pingu')"></div>
          <div class="tongzhuo" @click="changeArea('tongzhuo')"></div>
        </div>
        <img class="select-info" src="../assets/info.png" alt="">
      </van-swipe-item>
      <van-swipe-item>
        <div class="chart">
          <img class="area-name" :src="areasImg[area]" alt="" srcset="">
          <p class="area-day">{{tMonth}}月{{tDay}}日</p>
          <div class="area-wrap">

          
          <div class="chart1" id="chart1"></div><p class="tip1">注：数值代表该区的花粉总浓度</p>
          <div class="chart3" id="chart3"><span>花粉分类数据暂无</span><span>请查询临近区域</span></div><div class="chart2" id="chart2"></div>
          <p class="tip2" v-show="area !== 'tongzhuo' && area !== 'daxing'">注：数值代表该区主要种类的花粉浓度</p>
         </div>       
        </div>
      </van-swipe-item>
      <van-swipe-item>
        <img class="share" src="../assets/share.png" alt="">
        <div class="copy">长按可保存图片</div>
        <div class="share-btn">分享</div>
        <div class="share-btn share-btn1" @click="$router.push('/')">返回首页</div>
      </van-swipe-item>
    </van-swipe>
    <img v-if="current !== 3 && current !== 1" class="img-tl" src="../assets/down.png" alt="">
    <van-popup v-model="show" position="bottom">
      <van-datetime-picker
        v-model="currentDate"
        type="month-day"
        title="选择月日"
        :min-date="minDate"
        :max-date="maxDate"
        :formatter="formatter"
        @cancel="show=false"
        @confirm="confirm"
      />
    </van-popup>
    <van-popup v-model="show1">
      <img src="../assets/tip.png" class="popup-img"  alt="" srcset="">
    </van-popup>
  </div>
</template>

<script>
import dongchengimg from '../assets/dongcheng.png'
import xichengimg from '../assets/xicheng.png'
import haidianimg from '../assets/haidian.png'
import chaoyangimg from '../assets/chaoyang.png'
import fengtaiimg from '../assets/fengtai.png'
import shijingshanimg from '../assets/shijingshan.png'
import daxingimg from '../assets/daxing.png'
import fangshanimg from '../assets/fangshan.png'
import mentuogouimg from '../assets/mentuogou.png'
import changpingimg from '../assets/changping.png'
import yanqingimg from '../assets/yanqing.png'
import huairongimg from '../assets/huairong.png'
import miyunimg from '../assets/miyun.png'
import shunyiimg from '../assets/shunyi.png'
import pinguimg from '../assets/pingu.png'
import tongzhuoimg from '../assets/tongzhuo.png'


import 昌平 from '../assets/昌平.png'
import 朝阳 from '../assets/朝阳.png'
import 大兴 from '../assets/大兴.png'
import 东城 from '../assets/东城.png'
import 房山 from '../assets/房山.png'
import 丰台 from '../assets/丰台.png'
import 封面 from '../assets/封面.png'
import 海淀 from '../assets/海淀.png'
import 怀柔 from '../assets/怀柔.png'
import 门头沟 from '../assets/门头沟.png'
import 密云 from '../assets/密云.png'
import 平谷 from '../assets/平谷.png'
import 石景山 from '../assets/石景山.png'
import 顺义 from '../assets/顺义.png'
import 通州 from '../assets/通州.png'
import 西城 from '../assets/西城.png'
import 延庆 from '../assets/延庆.png'

import * as echarts from 'echarts';
import Select from './Select';
import {
  changping,
  chaoyang,
  fangshan,
  fengtai,
  haidian,
  huairuo,
  mentuoguo,
  miyun,
  pingu,
  shijingshan,
  shunyi,
  yanqing,
  tongzhuo,
  daxing,
  dataAll
} from './data.js';
export default {
  data() {
    return {
      show: false,
      minDate: new Date(2021, 1, 29),
      maxDate: new Date(2021, 8, 30),
      currentDate: new Date(2021, 5, 1),
      name: '昌平',
      current: 0,
      name: this.$route.params.name,
      url: 'https://pollenwechat.weatherbj.com/resource/pollen/h5img/',
      tMonth: 5,
      tDay: 1,
      area: 'changping',
      show1: false,
      imgs: {
        'dongcheng': dongchengimg,
        'xicheng': xichengimg,
        'haidian': haidianimg,
        'chaoyang': chaoyangimg,
        'fengtai': fengtaiimg,
        'shijingshan': shijingshanimg,
        'daxing': daxingimg,
        'fangshan': fangshanimg,
        'mentuogou': mentuogouimg,
        'changping': changpingimg,
        'yanqing': yanqingimg,
        'huairong': huairongimg,
        'miyun': miyunimg,
        'shunyi': shunyiimg,
        'pingu': pinguimg,
        'tongzhuo': tongzhuoimg
      },
      areasImg: {
        'dongcheng': 东城,
        'xicheng': 西城,
        'haidian': 海淀,
        'chaoyang': 朝阳,
        'fengtai': 丰台,
        'shijingshan': 石景山,
        'daxing': 大兴,
        'fangshan': 房山,
        'mentuogou': 门头沟,
        'changping': 昌平,
        'yanqing': 延庆,
        'huairong': 怀柔,
        'miyun': 密云,
        'shunyi': 顺义,
        'pingu': 平谷,
        'tongzhuo': 通州
      },
      areas: {
        'dongcheng': '东城',
        'xicheng': '西城',
        'haidian': '海淀',
        'chaoyang': '朝阳',
        'fengtai': '丰台',
        'shijingshan': '石景山',
        'daxing': '大兴',
        'fangshan': '房山',
        'mentuogou': '门头沟',
        'changping': '昌平',
        'yanqing': '延庆',
        'huairong': '怀柔',
        'miyun': '密云',
        'shunyi': '顺义',
        'pingu': '平谷',
        'tongzhuo': '通州'
      },
      data1: {
        changping,
        chaoyang,
        fangshan,
        fengtai,
        haidian,
        huairuo,
        mentuoguo,
        miyun,
        pingu,
        shijingshan,
        shunyi,
        yanqing,
        tongzhuo,
        daxing,
      }
    }
  },
  components: {
    Select
  },
  mounted () {
    this.initChart1()
    this.initChart2()
  },
  methods: {
    changeArea(area) {
      if (area == 'xicheng' || area == 'dongcheng') {
        this.show1 = true;
        return
      }
      this.area = area;
      this.initChart1()
      this.$refs['my-swipe'].next()
      if (area == 'tongzhuo' || area == 'daxing') {
        document.getElementById('chart3').style.display = 'flex'
        document.getElementById('chart2').style.display = 'none'
        return;
      };
      this.initChart2()
    },
    confirm(val) {
      const myDate = new Date(val);
      const tMonth = myDate.getMonth() + 1;
      const tDay = myDate.getDate();
      this.tMonth = tMonth;
      this.tDay = tDay;
      this.show = false;
      this.initChart1()
      this.initChart2()
      this.$refs['my-swipe'].next()
    },
    formatter(type, val) {
      if (type === 'month') {
        return `${val}月`;
      } else if (type === 'day') {
        return `${val}日`;
      }
      return val;
    },
    initChart1() {
      const myChart = echarts.init(document.getElementById('chart1'));
      console.log('this.area', this.area)
      const data = dataAll.map(item => {
        return {
          name: `2021/${item.date.replace('月', '/').replace('日', '')}`,
          value: [`2021/${item.date.replace('月', '/').replace('日', '')}`, item[this.areas[this.area]]]
        }
      })
      const option = {
        grid: {
          top: 30,
          left: 50,
          right: 20,
          bottom: 50
        },
        color: '#0D857D',
        title: {
          top: '1',
          subtext: '单位：粒/千平方毫米',
          left: 'right',
          padding: [5, 12],
          subtextStyle: {
            fontSize: '9px',
            color: '#333333',
            opacity: 0.8
          }
        },
        // tooltip: {
        //   trigger: 'axis',
        //   formatter: '{b0}',
        //   lineStyle: {
        //     color: '#BFBFBF',
        //     width: 0.5,
        //     type: 'dashed',
        //   },
        // },
        xAxis: {
          type: 'time',
          formatter: function (params) {
            params = params[0];
            var date = new Date(params.name);
            return (
              date.getDate() +
              '/' +
              (date.getMonth() + 1) +
              '/' +
              date.getFullYear() +
              ' : ' +
              params.value[1]
            );
          },
          splitLine: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          splitLine: {
            lineStyle: {
              color: '#BFBFBF',
              width: 0.5,
              type: 'dashed',
            }
          }
        },
        series: [
          {
            type: 'line',
            showSymbol: false,
            data: data,
            markLine: {
              silent: true,
              data: [{ xAxis: `2021/${this.tMonth}/${this.tDay}` }],
              lineStyle: {
                color: '#BFBFBF',
                width: 0.5,
                type: 'dashed',
              },
              label: {
                show: false,
              },
              symbolSize: 16,
              symbol: ['none', 'image://']
            },
          }
        ]
      };
      myChart.setOption(option)
    },
    initChart2() {
      document.getElementById('chart2').style.display = 'block'
      document.getElementById('chart3').style.display = 'none'
      const myChart = echarts.init(document.getElementById('chart2'));
      const datas = []
      this.data1[this.area].forEach(item => {
        datas.push([`2021/${item['日期'].replace('月', '/').replace('日', '')}`, item['柏科'], '柏科'])
        datas.push([`2021/${item['日期'].replace('月', '/').replace('日', '')}`, item['藜科'], '藜科'])
        datas.push([`2021/${item['日期'].replace('月', '/').replace('日', '')}`, item['杨柳科'], '杨柳科'])
        datas.push([`2021/${item['日期'].replace('月', '/').replace('日', '')}`, item['菊科蒿属'], '菊科蒿属'])
        datas.push([`2021/${item['日期'].replace('月', '/').replace('日', '')}`, item['松科'], '松科'])
        datas.push([`2021/${item['日期'].replace('月', '/').replace('日', '')}`, item['桑科'], '桑科'])
      })
      const option = {
        tooltip: {
          trigger: 'axis',
          // formatter: '{a0}',
          lineStyle: {
            color: '#BFBFBF',
            width: 0.5,
            type: 'dashed',
          },
        },
        // grid: {
        //   top: 30,
        //   left: 50,
        //   right: 20,
        //   bottom: 70
        // },
        title: {
          top: '0',
          subtext: '单位：粒/千平方毫米',
          left: 'right',
          subtextStyle: {
            fontSize: '9px',
            color: '#333333',
            opacity: 0.8,
          },
          padding: [5, 12]
        },
        color: ['#3bc3b2','#7ee98e',  '#78d4f4','#f5e58b' , '#ffaf89', '#92a9cc'],
        legend: {
          itemWidth: 18,
          itemHeight: 8,
          textStyle: {
            fontSize: 8,
          },
          top: 28,
          data: [{
            name: '柏科',
            itemStyle: {
              color: '#3bc3b2'
            }
          }, {
            name:  '松科',
            itemStyle: {
              color: '#ffaf89'
            }
          }, {
            name: '杨柳科',
            itemStyle: {
              color: '#78d4f4'
            }
          }, {
            name: '藜科',
            itemStyle: {
              color: '#7ee98e'
            }
          }, {
            name: '菊科蒿属',
            itemStyle: {
              color: '#f5e58b'
            }
          }, {
            name: '桑科',
            itemStyle: {
              color: '#92a9cc'
            }
          }]
        },
        singleAxis: {
          top: 50,
          bottom: 50,
          axisTick: {},
          axisLabel: {},
          type: 'time',
          axisPointer: {
            animation: true,
            label: {
              show: true
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#BFBFBF',
              opacity: 0.2
            }
          }
        },
        series: [
          {
            type: 'themeRiver',
            emphasis: {
              itemStyle: {
                shadowBlur: 20,
                shadowColor: '#BFBFBF',
                lineStyle: {
                  width: 1
                },
              }
            },
            data: datas,
            label: false,
            // markLine: {
            //   silent: true,
            //   data: [{ xAxis: `2021/${this.tMonth}/${this.tDay}` }],
            //   lineStyle: {
            //     color: '#BFBFBF',
            //     width: 0.5,
            //     type: 'dashed',
            //   },
            //   label: {
            //     show: false,
            //   },
            //   symbolSize: 16
            // },
          }
        ]
      };
      myChart.setOption(option)
    },
    onChange(index) {
      this.current = index;
    }
  }
}
</script>
<style>
.info {
  width: 100%;
  height: 100vh;
  background: url('../assets/bgall.png') no-repeat center;
  background-size: cover;
  position: relative;
  box-sizing: border-box;
}
.van-swipe-item {
  height: 100vh;
  width: 100%;
  text-align: center;
  position: relative;
}
.info_top {
  width: 100%;
  /* height: 128px; */
}
.info_m {
  width: 338px;
  /* height: 338px; */
  margin: 20px auto;
}
.info_text {
  text-align: center;
  color: #444;
}
.info_list {
  width: 310px;
  margin: 30px auto 20px;
}
.info_tl {
  width: 220px;
  margin: 10px auto;
}
.share {
  width: 100%;
  height: 100%;
}
.copy {
  position: absolute;
  top: 61vw;
  text-align: center;
  width: 100%;
  font-size: 12px;
  font-family: Alibaba;
  font-weight: normal;
  color: #fff;
  line-height: 47px;
}
.share-btn {
  position: absolute;
  background: #eef286;
  border-radius: 19px;
  top: 50vh;
  left: 0;
  right: 0;
  margin: auto;
  width: 132px;
  height: 38px;
  line-height: 38px;
  text-align: center;
  font-size: 23px;
  color: #009966;
}
.share-btn1 {
  top: 58vh;
}

.chart {
  padding-top: 20px;
  position: relative;
}
.area-wrap {
  background: rgba(255, 255, 255, 0.7);
  width: 346px;
  margin: 0 auto;
  border-radius: 15px 15px 0 0;
}
.area-name {
  height: 40px;
  margin: 15px auto;
  /* text-align: center;
  font-size: 30px;
  font-family: Alibaba;
  font-weight: bold;
  font-style: italic;
  color: #FFFFFF;
  line-height: 60px;
  -webkit-text-stroke: 2px #0C857D;
  text-stroke: 2px #0C857D; */
}
.area-day {
  color: #FDFEFE;
  font-size: 12px;
  position: absolute;
  top: 48px;
  right: 20px;
}
.chart1 {
  margin: 0 auto;
  width: 346px;
  height: 30vh;
  /* background: rgba(255, 255, 255, 0.7); */
  border-radius: 15px 15px 0 0;
}
.chart2 {
  position: relative;
  /* top: -18px; */
  width: 346px;
  height: 46vh;
  /* background: rgba(255, 255, 255, 0.7); */
  margin: 0 auto;
}
.chart3 {
  width: 346px;
  height: 46vh;
  /* background: rgba(255, 255, 255, 0.7); */
  margin: 0 auto;
  display:flex;
  align-items: center;
  justify-content: center;
  color: #000000;
  flex-direction: column;
}

.select-time {
  height: 27px;
  width: 221px;
  margin: 40px auto 0;
}
.time-show {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 12px;
}
.t-f {
  margin-left: 26px;
  width: 60px;
  height: 27px;
  background: rgba(254, 253, 252, 0.8);
  font-size: 21px;
  font-family: Alibaba;
  font-weight: normal;
  color: #0D857D;
  line-height: 27px;
}
.t-b {
  font-size: 21px;
  font-family: Adobe Heiti Std;
  font-weight: normal;
  color: #FDFEFE;
  line-height: 39px;
  margin-left: 8px;
}
.select-select {
  margin: 35px auto 45px;
  width: 207px;
  height: 27px;
}
.area {
  width: 330px;
  height: 266px;
  margin: auto;
  position: relative;
}
.select-bg {
  width: 100%;
  height: 100%;
  display: inline-block;
}
.select-info {
  width: 315px;
  height: 32px;
  margin: 20px auto;
  display: block;
}
.dongcheng {
  position: absolute;
  right: 20px;
  bottom: 51px;
  width: 55px;
  height: 20px;
  /* background-color:red; */
}
.xicheng {
  position: absolute;
  right: 20px;
  bottom: 81px;
  width: 55px;
  height: 20px;
  /* background-color:red; */
}
.haidian {
  position: absolute;
  border-radius: 50%;
  left: 115px;
  top: 150px;
  width: 37px;
  height: 30px;
  /* background-color:red; */
}
.chaoyang {
  position: absolute;
  border-radius: 50%;
  left: 156px;
  top: 160px;
  width: 30px;
  height: 40px;
  /* background-color:red; */
}
.fengtai {
  position: absolute;
  border-radius: 50%;
  left: 100px;
  top: 193px;
  width: 60px;
  height: 10px;
  /* background-color:red; */
}
.shijingshan {
  /* border-radius: 50%; */
  position: absolute;
  left: 110px;
  top: 178px;
  width: 30px;
  height: 10px;
  /* background-color:red; */
}
.daxing {
  position: absolute;
  left: 129px;
  top: 205px;
  width: 50px;
  height: 50px;
  /* background-color:red; */
  border-radius:50%;
}
.fangshan {
  position: absolute;
  left: 8px;
  top: 200px;
  width: 120px;
  height: 50px;
  /* background-color:red; */
  border-radius:20%;
}
.fangshan {
  position: absolute;
  left: 8px;
  top: 200px;
  width: 120px;
  height: 50px;
  /* background-color:red; */
  border-radius:20%;
}
.mentuogou {
  position: absolute;
  left: 8px;
  top: 160px;
  width: 100px;
  height: 30px;
  /* background-color:red; */
  border-radius:20%;
}
.changping {
  position: absolute;
  left: 83px;
  top: 120px;
  width: 80px;
  height: 30px;
  /* background-color:red; */
  border-radius:20%;
}
.yanqing {
  position: absolute;
  left: 53px;
  top: 40px;
  width: 100px;
  height: 70px;
  /* background-color:red; */
  border-radius:20%;
}
.huairong {
  position: absolute;
  left: 163px;
  top: 6px;
  width: 40px;
  height: 120px;
  /* background-color:red; */
  border-radius:20%;
}
.miyun {
  position: absolute;
  left: 206px;
  top: 38px;
  width: 80px;
  height: 80px;
  /* background-color:red; */
  border-radius:20% 20% 50% 20%;
}
.shunyi {
  position: absolute;
  left: 174px;
  top: 130px;
  width: 66px;
  height: 34px;
  /* background-color:red; */
  border-radius:20%;
}
.pingu {
  position: absolute;
  left: 244px;
  top: 117px;
  width: 46px;
  height: 46px;
  /* background-color:red; */
  border-radius:20%;
}
.tongzhuo {
  position: absolute;
  left: 187px;
  top: 170px;
  width: 46px;
  height: 66px;
  /* background-color:red; */
  border-radius:20%;
}
.tip1 {
  transform: scale(0.6);
  position: relative;
  left: -28px;
  bottom: 15px;
  text-align: left;
}
.tip2 {
  transform: scale(0.6);
  position: relative;
  left: -28px;
  bottom: 10px;
  text-align: left;
}
</style>